import { useRefModel } from "@/utils/hooks";
import { beforeUploadVideo, uploadVideo } from "./utils";
import styles from "./style.module.less";
import { tipText } from "./store";
export default defineComponent({
  name: "UploadVideo",
  props: {
    modelValue: {
      type: String,
      default: undefined,
    },
    fileId: {
      type: String,
      default: "",
    },
    listType: {
      type: [Object, String],
      default: "picture-card",
    },
    class: {
      type: [Object, String],
      default: "card-uploader",
    },
    accept: {
      type: [Object, String],
      default: "video/*",
    },
    showUploadList: {
      type: [Object, Boolean],
      default: false,
    },
    play_font_size: {
      type: Number,
      default: 14,
    },
    delete_font_size: {
      type: Number,
      default: 14,
    },
  },
  emits: ["update:modelValue", "update:fileId"],
  setup(props, { expose, emit, attrs, slots }) {
    const loading = ref<boolean>(false);
    const { play_font_size, delete_font_size, modelValue, ...arg } = props;
    const tmp_props = {};
    Object.keys(arg).forEach(
      (key) => (tmp_props[key] = arg?.[key]?.value ?? arg[key])
    );
    const videoUrl = useRefModel(props, "modelValue", emit);
    const fileId = useRefModel(props, "fileId", emit);
    const beforeUpload = async (file: any) => {
      const duration: any = await beforeUploadVideo(file);
      if (!(duration <= 15))
        message.error($t("placeholder67") + 15 + $t("base.second"));
      return duration <= 15;
    };
    const customRequest = async ({ file }: any) => {
      try {
        loading.value = true;
        const authRes = await userApi.queryAuthRandom({
          authType: "upload_video",
        });
        let authRadom = authRes.data.random;
        const signatureRes: any = await userApi.querySignature({
          video_class: `PERFORMANCE`,
          authRadom,
        });
        uploadVideo(file, signatureRes.data.signature, (doneResult: any) => {
          videoUrl.value = doneResult.video.url;
          fileId.value = doneResult.fileId;
          loading.value = false;
        });
      } catch (error: any) {
        message.error(error.message);
      }
    };
    const $props = {
      ...tmp_props,
      ...attrs,
      beforeUpload,
      customRequest,
    };
    return () => (
      <>
        <div class={styles.container}>
          {loading.value ? (
            <div class={styles.layout}>
              <a-spin tip={tipText.value} />
            </div>
          ) : null}
          {videoUrl.value ? (
            <video-player
              v-model={videoUrl.value}
              isDisplayDelete={true}
              play_font_size={play_font_size}
              delete_font_size={delete_font_size}
            />
          ) : (
            <a-upload {...$props}>
              <div>
                <plus-outlined />
                <div class="ant-upload-text">{$t("base.uploadVideo")}</div>
              </div>
            </a-upload>
          )}
        </div>
      </>
    );
  },
});
